<template>
  <div class="content">
    <div class="title">
      <div class="titleCon">
        <div class="left-title">
          <div
            :class="['title-text', { active: inactive == item.id }]"
            v-for="item in leftTitle"
            :key="item.id"
            @click="changeTitle(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="center-title"></div>
        <div class="right-title">
          <div
            :class="['title-text', { active: inactive == item.id }]"
            v-for="item in rightTitle"
            :key="item.id"
            @click="changeTitle(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="page">
      <RealTimeAlarm v-if="inactive == 3"></RealTimeAlarm>
    </div>
  </div>
</template>

<script setup lang="ts">
import RealTimeAlarm from "./components/RealTimeAlarm.vue";
import { ref } from "vue";

const inactive = ref<string | number>("1");

const leftTitle = ref([
  {
    title: "计划页面",
    id: "1",
  },
  {
    title: "监控页面",
    id: "2",
  },
  {
    title: "实时报警",
    id: "3",
  },
  {
    title: "报表查看",
    id: "4",
  },
  {
    title: "参数记录",
    id: "5",
  },
]);

const rightTitle = ref([
  {
    title: "工艺管理",
    id: "6",
  },
  {
    title: "电子检查",
    id: "7",
  },
  {
    title: "捡点",
    id: "8",
  },
  {
    title: "用户管理",
    id: "9",
  },
  {
    title: "退出系统",
    id: "10",
  },
]);

const changeTitle = (id: string) => {
  inactive.value = id;
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;

  background: linear-gradient(
    25deg,
    #0f2249,
    #182e5a 20%,
    #0f2249 40%,
    #182e5a 60%,
    #0f2249 80%,
    #182e5a 100%
  );
  .title {
    height: 60px;
    width: 100%;
    display: flex;
    background-image: url(../../assets/head_bg.png);
    background-size: contain;
    background-position: center; /* 可选，使背景图居中 */
    background-repeat: no-repeat; /* 可选，防止背景图重复 */
  }
  .titleCon {
    width: 100%;
    height: 29px;
    background-color: #0f2249;
    display: flex;
  }
  .left-title,
  .right-title {
    width: 30%;
    height: 29px;
    display: flex;
    justify-content: space-between;
  }
  .center-title {
    width: 40%;
    height: 29px;
  }
}
.title-text {
  cursor: pointer;
  width: 19%;
  height: 29px;
  display: flex;
  justify-content: center;
  align-items: center;

  color: #fff;
  font-size: 14px;
}
.active {
  box-shadow: -10px 0px 15px #034c6a inset, 0px -10px 15px #034c6a inset,
    10px 0px 15px #034c6a inset, 0px 10px 15px #034c6a inset;
}
.page {
  width: 100%;
  height: calc(100% - 60px);
}
</style>